import React, {useEffect} from 'react';
import {useTheme} from '../../contexts/ThemeContext.tsx';
import {lightColors, darkColors} from '../../styles/colors.ts';

// 全局切换样式，这里会将global.scss文件里面的颜色样式覆盖，所以单独修改global.scss 文件里面的颜色不会生效，需要修改color.ts文件里面的
const ThemeVariables: React.FC = () => {
    const {theme} = useTheme();
    const colors = theme === 'dark' ? darkColors : lightColors;

    useEffect(() => {
        // 注入CSS变量到根节点
        const root = document.documentElement;

        // 基础颜色
        root.style.setProperty('--color-primary', colors.primary);
        root.style.setProperty('--color-secondary', colors.secondary);
        root.style.setProperty('--color-success', colors.success);
        root.style.setProperty('--color-warning', colors.warning);
        root.style.setProperty('--color-error', colors.error);
        root.style.setProperty('--color-info', colors.info);

        // 文本颜色
        root.style.setProperty('--color-text-primary', colors.text.primary);
        root.style.setProperty('--color-text-secondary', colors.text.secondary);
        root.style.setProperty('--color-text-disabled', colors.text.disabled);

        // 背景颜色
        root.style.setProperty('--color-bg-primary', colors.background.primary);
        root.style.setProperty('--color-bg-secondary', colors.background.secondary);
        root.style.setProperty('--color-bg-paper', colors.background.paper);

        // 边框和装饰
        root.style.setProperty('--color-border', colors.border);
        root.style.setProperty('--color-divider', colors.divider);
        root.style.setProperty('--color-hover', colors.hover);
    }, [theme, colors]);

    return null;
};

export default ThemeVariables;
